<script setup>
import { ref, watch } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

const lectures = ref([
  {
    name: "Python快速入门",
    price: 999.00,
    teacher: "张敏",
    studentCount: 6058,
    noteCount: 103,
    suggestion: {
      price: "学生购买该课程意愿很强，可以考虑适当提高价格",
      activity: "本课程活跃度很高，学生有很强的互动意愿",
    }
  },
  {
    name: "R语言与数据挖掘",
    price: 99.00,
    teacher: "张敏",
    studentCount: 1373,
    noteCount: 45,
    suggestion: {
      price: "推荐适当降低价格以增加销量",
      activity: "该课程学生有一定的互动意愿",
    }
  },
  {
    name: "Python编程基础",
    price: 109.00,
    teacher: "张敏",
    studentCount: 1086,
    noteCount: 23,
    suggestion: {
      price: "推荐适当降低价格以增加销量",
      activity: "学生参与度较低，可以增加互动",
    }
  },
  {
    name: "大数据应用开发(Python)",
    price: 999.00,
    teacher: "泰迪教务",
    studentCount: 256,
    noteCount: 114,
    suggestion: {
      price: "推荐适当降低价格以增加销量",
      activity: "本课程活跃度很高，学生有很强的互动意愿",
    }
  },
  {
    name: "Python数据分析与应用",
    price: 299.00,
    teacher: "张敏",
    studentCount: 3666,
    noteCount: 88,
    suggestion: {
      price: "学生购买该课程意愿很强，可以考虑适当提高价格",
      activity: "本课程活跃度很高，学生有很强的互动意愿",
    }
  },
  {
    name: "Python数据分析与挖掘实战",
    price: 99.00,
    teacher: "刘晓玲",
    studentCount: 346,
    noteCount: 22,
    suggestion: {
      price: "推荐将课程设为免费课程，以吸引流量",
      activity: "学生参与度较低，可以增加互动",
    }
  },
  {
    name: "Python机器学习算法原理与实现",
    price: 319.00,
    teacher: "张敏、赵云龙",
    studentCount: 109,
    noteCount: 24,
    suggestion: {
      price: "推荐适当降低价格以增加销量",
      activity: "学生参与度较低，可以增加互动",
    }
  },
  {
    name: "Hadoop大数据开发基础",
    price: 369.00,
    teacher: "郑素铃",
    studentCount: 202,
    noteCount: 19,
    suggestion: {
      price: "推荐适当降低价格以增加销量",
      activity: "学生参与度较低，可以增加互动",
    }
  },
  {
    name: "TensorFlow2实战",
    price: 99.00,
    teacher: "张敏、张良均",
    studentCount: 3664,
    noteCount: 15,
    suggestion: {
      price: "学生购买该课程意愿很强，可以考虑适当提高价格",
      activity: "学生参与度较低，可以增加互动",
    }
  },
]);

//------------------for chart dependences----------------------
  import { use } from 'echarts/core'
  import { BarChart } from 'echarts/charts'
  import { GridComponent } from 'echarts/components'
  import { CanvasRenderer } from 'echarts/renderers'
  import VChart from 'vue-echarts'
  use([
    GridComponent, 
    BarChart, 
    CanvasRenderer
  ])

  const PriceCompareoption_placeholder = ref({
  xAxis: {
    type: 'category',
    data: ['本课程', '同价位平均']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 0,
          itemStyle: {
            color: '#8ECB74'
          }
        },
        0
      ],
      type: 'bar'
    }
  ]
});

const PriceCompareoption = ref({
  xAxis: {
    type: 'category',
    data: ['本课程', '同价位平均']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 399,
          itemStyle: {
            color: '#8ECB74'
          }
        },
        1862
      ],
      type: 'bar'
    }
  ]
});

const NoteCompareoption = ref({
  xAxis: {
    type: 'category',
    data: ['本课程', '平均笔记数']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        {
          value: 150,
          itemStyle: {
            color: '#8ECB74'
          }
        },
        50
      ],
      type: 'bar'
    }
  ]
});

//-----------------for switch button-------------------
const currentIndex = ref(0);

// 当前展示的课程信息
const currentLecture = ref(lectures.value[currentIndex.value]);

// 切换到上一个课程
const fetchPreviousLecture = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
    currentLecture.value = lectures.value[currentIndex.value];
  }else{
    currentIndex.value = lectures.value.length - 1;
    currentLecture.value = lectures.value[currentIndex.value];
  }
};

// 切换到下一个课程
const fetchNextLecture = () => {
  if (currentIndex.value < lectures.value.length - 1) {
    currentIndex.value++;
    currentLecture.value = lectures.value[currentIndex.value];
  }else{
    currentIndex.value = 0;
    currentLecture.value = lectures.value[currentIndex.value];
  }
};

watch(currentLecture, (newValue) => {
  // 更新图表数据
  PriceCompareoption.value.series[0].data[0].value = newValue.studentCount;
  NoteCompareoption.value.series[0].data[0].value = newValue.noteCount;
  // 触发图表重新渲染
  // 这里需要根据你的实际情况调用图表渲染方法
});

</script>

<template>
  <div class="Lecture">
    <div class="lecture_title">
      <h2>优质课程资源分析</h2>
    </div>
    <div class="section">
      <div class="left_section">
        <div class="Lecture_info">
          <el-descriptions style="margin-top: 5%;" :column="1" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                课程名称 
                </div>
              </template>
                  <p>{{ lectures[currentIndex].name }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  授课讲师
                </div>
              </template>
                  <p>{{ lectures[currentIndex].teacher }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  课程价格
                </div>
              </template>
                  <p>{{ lectures[currentIndex].price }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  学习人数
                </div>
              </template>
                  <p>{{ lectures[currentIndex].studentCount }}</p>
            </el-descriptions-item>

          </el-descriptions>
        </div>
        <div class="Lecture_suggestion">
          <h3>建议&评价：</h3>
          <el-descriptions style="margin-top: 20%;" :column="1" :size="size" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                价格方面 
                </div>
              </template>
                  <p>{{ lectures[currentIndex].suggestion.price }}</p>
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item" style="color:black">
                  活跃度
                </div>
              </template>
                  <p>{{ lectures[currentIndex].suggestion.activity }}</p>
            </el-descriptions-item>

          </el-descriptions>
        </div>
      </div>
      <div class="right_section">
        <div class="Lecture_charts_1">
          <v-chart class="chart" :option="PriceCompareoption_placeholder"></v-chart>
        </div>
        <div class="Lecture_charts">
          <h3>同价位课程学习人数对比</h3>
          <v-chart class="chart" :option="PriceCompareoption"></v-chart>
        </div>
        <div class="Lecture_charts">
          <h3>笔记数对比</h3>
          <v-chart class="chart" :option="NoteCompareoption"></v-chart>
        </div>

        
      </div>
    </div>
    <div class="Lecture_switch">
      <el-button-group class="Lecture_switch_button">
        <el-button type="primary" @click="fetchPreviousLecture" :icon="ArrowLeft"
          >上一个</el-button
        >
        <el-button type="primary" @click="fetchNextLecture"
          >下一个<el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<style scoped>
.Lecture {
  padding: 10px;
  display: inline-flex;
  flex-wrap: wrap;
  height: 690px;
  width: 34%;
  border: 1px gainsboro solid;
  border-radius: 10px;
  background-color: white;
  color: black;
}

.Lecture h2 {
  margin: 0;
  margin-right: 60px;
  display: inline-flex;
  text-align: center;
}

.Lecture h3 {
  margin: 5px;
}

.lecture_title {
  display: flex;
  height: 4%;
  width: 100%;
  margin-bottom: 1%;
  box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}

.Lecture h1 {
  text-align: center;
  margin: 2%;
}

.section {
  display: flex;
  flex-wrap: nowrap;
  height: 86%;
}

.left_section {
  width: 42%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  margin-right: 1%;
}

.right_section {
  width: 58%;
  height: 98%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.Lecture_info {
  width: 100%;
  height: 40%;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 0.05%;
}

.Lecture_info li {
  margin-top: 0px;
  padding: 15px;
}

.Lecture_suggestion {
  width: 100%;
  height: 48%;
  border-radius: 10px;
  box-sizing: border-box;
}

.Lecture_suggestion h1 {
  margin: 5px;
}

.Lecture_suggestion li {
  padding: 7px;
}

.Lecture_suggestion p {
  margin: 0px;
}

.Lecture_switch {
  margin: 0;
  height: 10%;
  width: 100%;
  border-radius: 10px;
}

.Lecture_switch_button {
  margin-top: 3%;
  margin-left: 35%;
}

.Lecture_charts {
  display: inline-block;
  height: 49.75%;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 1%;
}

.Lecture_charts_1 {
  height: 1px;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 1%;
}


.chart {
  height: 100%;
  width: 100%;
} 
</style>